From ingested wireframe to properly built product

Ingest ✓ shipped today

• Wireframe split into index.html (markup) / app.js (logic — treat as spec) / product.css (styles) so engineering can consume each independently.
• Palette remapped to PTR tokens: greens → --color-primary/--ptr-green, cool greys → base scale, status families → the DaisyUI feedback pairs (success/info/warning/error) + secondary for business/review, fonts → Inter / Source Code Pro, radii vars → --radius-box/--radius-field.
• Old React kit (AppShell, CaseList, CaseDetail, Login, StatusBadge) and the Product Screen template deleted.

Reference build — My Inbox + Case Detail ✓ shipped July 17 first handoff

Shipped as ui_kits/product/reference.html + reference.css: every component of the two core views as copy-paste plain-HTML blocks with documented classes and all states enumerated — row (default / hover / overdue / starred / flagged / selected), status pills (both taxonomies, 8 tint/ink groups), doc-progress dots, scope chips, filter bar, quick tabs, group headers, empty states, the year/jurisdiction status table, cards, buttons, form fields.

• Namespace classes while writing it (.tp-row, .tp-pill, …) — the interactive app adopts the same names so specimen and app never drift. Done July 17: reference.css is the namespaced contract (mirrors their .og-* convention — confirmed in og_dashboard.css, ~150 app-prefixed classes).
• Map each block to a suggested Django partial (_case_row.html, _status_pill.html, …) and note the HTMX seams: filter bar swaps the list region, row click loads detail into the tab region, modals fetch as fragments. Done July 17 — partial map + seam contract in §6 of the specimen, matched to their partials/ vs components/ split and hx-get/hx-target/hx-swap="innerHTML" patterns from marketing_platform.
• Unblocked July 17: codebase linked and reviewed — Django templates + HTMX (surgical: partial swaps, polling, delayed-keyup validation) + Alpine for client-only state; Tailwind v4 + DaisyUI classes; compiled locally via input.css @source per app; "HTMX first, JS last" codified in their CLAUDE.md.

Normalization — make it PTR-shaped, not just PTR-colored ✓ shipped July 17

• Apply the custom-CSS budget below: collapse .tp-* onto DaisyUI per the specimen's §7 map; the interactive kit (index.html/product.css/app.js) adopts the surviving .tp-* names so specimen and app never drift.
• DaisyUI component shapes: buttons/inputs/selects/badges/tabs/modals adopt btn-style geometry — 2px borders on fields and buttons, radii 4/4/8, focus states from the theme.
• Type: base 13.5px grid → PTR scale (--fs-tiny 12 / --fs-small 14 / --fs-body 16); tabular numerics kept for IDs and money.
• Spacing onto --space-*; shadows onto --shadow-*; motion onto the Speed-Wins durations.
• Promote the status ramps to named tokens in package/brand.css (hand-authored block): tint/ink pairs per group (done / ready / pending / hold / stopped / info / business / review) following the badge-tint rule — then app.js color maps read tokens, not hexes; the .tp-pill component classes consuming them move to package/product.css (shared layer, v0.2).
• Schedule the Figma-side tokens.json update replacing the 8 stand-in case colors with the real taxonomy, then npm run build. Still open — the only Phase-2 item not shipped; the 8 group pairs live as a hand-authored block in brand.css until then.

Shipped July 17: §7 collapse applied — buttons/fields/checkboxes are DaisyUI classes (btn / input / select / textarea / checkbox, previewed via ui_kits/product/daisy.css, a preview-only shim real builds drop); 2px field/button borders, 4/4/8 radii, primary focus states; type on 12/14/16 with tabular numerals (uppercase overlines kept at 10px behind a local --fs-micro alias — candidate token); spacing/shadows/motion on --space-* / --shadow-* / duration tokens. --case-{group}-bg/-fg promoted to package/brand.css; pills/empty/filter bar/toast ship from package/product.css (v0.2, in the exports map). The interactive kit adopted the surviving .tp-* names; app.js now emits group classes / token refs, never hex — the working-25 grouping is one re-mappable table (WORKING_GROUP, matches the specimen §1) pending E-001.7. Row checkboxes and form check-lines are real <input type="checkbox"> now (the §7 a11y fix). Statuses, validation and the points formula untouched. Addendum (responsive shell): ≤1240px case rows restructured (id | name | status | updated over debt | docs | fee; bulk-select hidden); ≤880px the sidebar becomes a slide-in drawer behind a hamburger (replaces the logo), brand + Plan notes drop, and the search — now uncapped at every width — fills the header. Drawer classes (.tp-menubtn, .rail-backdrop) are app-shell only, not part of the .tp-* specimen contract.

The custom-CSS budget rule · July 17

Goal: one cohesive platform, minimum app customization. Audit of the app's og_dashboard.css (~150 .og-* classes) found roughly 15% theme overrides (deleted by the package swap), 35% genuinely bespoke (leaderboard medals, sticky columns), 50% hand-built duplicates of DaisyUI capability (modals, toasts, chips, panel cards). The rule for Tax Prep — and the standard for every future surface:

• 1 · DaisyUI component first. btn / badge / modal / tabs / table / skeleton + theme tokens before any custom class.
• 2 · Used by 2+ apps → package. Shared product vocabulary (status pills, empty states, filter bars, toasts) ships in package/product.css — the deferred layer, revived as the shared layer in v0.2 — never copied per app.
• 3 · App-prefixed CSS only for the truly bespoke — and it reads tokens, never hex. (The app's sticky columns hardcode #e8e8e8/#1a1a1a — they'll stay Apple-gray after the PTR swap; flagged for the Phase-2 contrast pass.)

Applied to this surface: reference.css now carries a per-class "collapses onto" map (§7 of the specimen) — the final .tp-* layer after Phase 2 is ~30 classes (case-row grid, year/jurisdiction table, doc dots, scope chips), not 150.

Forms → Django spec ✓ shipped July 17

The three modals become server-rendered form specs — field list, types, required rules, conditional sections, error presentation — plus the HTMX interaction contract (open as fragment, inline validation, submit → toast + row refresh):

• Tax-prep tracking (retires the Zapier TP Tracking Zap): years (scope-seeded toggles + other), agency Federal/State/Both, state multi-select (required when State/Both), status (the 17), applies-to Personal/Business/Both, date filed, follow-up (assignee + date required when checked), balance-owed notes. Submission writes onto the per-year scope model.
• IRS transcript handpull (THS · 4506-C): locked case/department/software, transcript types multi, taxpayer, notes; request log with pending/submitted/received/failed states.
• Bookkeeping work log: years, status (5), bookkeeper, businesses count, types → conditional metric grids, additional points, mistake flag, required notes. Points formula moves server-side — the weights in app.js (BK_PTS) are sample values, backend-configured.

Shipped July 17: ui_kits/product/forms.html (§8 of the specimen set) — per-form field tables (name, type, required, conditional-on, error copy lifted verbatim from app.js), copy-paste modal markup on DaisyUI modal + native <dialog> (the §7 collapse, applied), and the HTMX contract: open as fragment → #tp-modal + showModal(); inline validation delayed-keyup where the codebase does it; submit → close + toast + owning-region swap (#tp-year-table + case row / transcripts card / bookkeeping card). Bookkeeping points recompute via a server round-trip (#bk-points-bar swap) — weights backend-configured. The interactive kit's three modals converted to the same <dialog> shells (wiring only; daisy.css shim gained modal/modal-box/modal-backdrop; Escape + backdrop close now native) — app.js statuses, validation and the points formula untouched. Suggested partials per §6 naming: _tracking_form / _handpull_form / _bk_form / _form_field / _bk_points_bar. Flagged, not resolved: E-004.1, E-004.6/.7, E-003.4.

Remaining views

Team Queue, Reports, Bookkeeping inventory, Awaiting Client, Starred/Flagged/Archive — built from the Phase 1/2 patterns once those settle. Team Queue and Reports also need real data (only Allen Rose's 16 of 47 cases exist in the wireframe; report targets are plan goals, not measurements).

Open product decisions blockers before build-out

Carried verbatim in the app's plan-notes panel; owners are business-side:

• E-001.7 — reconciled best-judgment July 17: everything user-facing shows the finalized 17 — the STATUS filter matches per-year statuses, and the Overall TP pill maps the Logics working value through WORKING_TO_FINAL (one re-mappable table; raw value in the pill tooltip). Remaining: business sign-off on the 25→17 mapping.
• E-003.4 — overdue threshold: 14 vs 30 days.
• E-005.7 — urgency override needs a UI home (8th quick tab, row badge, or pin-to-top).
• E-004.6/.7 — "Remind Client" / "Request Docs": channel + content undefined.
• E-005.9 — source system for the IRS/State debt split.
• E-004.1 — confirm the "via mailed" signature path before a DocuSign-only flow is hard-coded.